/**
 * @file src/App.tsx
 * @description 应用主入口文件，负责提供全局 Provider 和错误边界。
 */
import React from 'react';
import {
  CssBaseline,
  ThemeProvider,
  createTheme,
} from '@mui/material';
import { SnackbarProvider } from 'notistack';
import { ReactFlowProvider } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { ErrorBoundary } from './components/ErrorBoundary';
import { FlowEditorContent } from './components/FlowEditor/FlowEditorContent';

/**
 * @constant darkTheme
 * @description 应用的暗色主题配置。
 */
const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#90caf9', // Light blue for dark mode
    },
    secondary: {
      main: '#f48fb1', // Pink for dark mode
    },
    background: {
      default: '#121212', // Dark background
      paper: '#1e1e1e',   // Slightly lighter dark for paper elements
    },
    text: {
      primary: '#ffffff', // White text
      secondary: '#b0b0b0', // Light grey secondary text
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h6: {
      fontWeight: 500,
    },
  },
  spacing: 8, // Set a base spacing unit of 8px
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: '#272727', // Darker app bar
          borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
        },
      },
    },
    MuiDrawer: {
      styleOverrides: {
        paper: {
          backgroundColor: '#1e1e1e', // Darker drawer background
          borderRight: '1px solid rgba(255, 255, 255, 0.12)',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none', // Remove uppercase transform
          fontWeight: 600,
        },
      },
    },
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: '0.8rem', // Smaller tooltip font
        },
      },
    },
  },
});

/**
 * @function App
 * @description 应用的根组件，负责提供 SnackbarProvider、ThemeProvider 和渲染 FlowEditorContent。
 * SnackbarProvider 用于全局管理消息提示。
 */
function App() {
  return (
    <ErrorBoundary>
      <SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
        <ThemeProvider theme={darkTheme}>
          <CssBaseline />
          <ReactFlowProvider>
            <FlowEditorContent />
          </ReactFlowProvider>
        </ThemeProvider>
      </SnackbarProvider>
    </ErrorBoundary>
  );
}

export default App;
